<template>
    <div class="bg">
        <div class="loginq">
       <span class="ming">用户名</span> <input class="user" type="text" v-model="username" >
        <span class="ma">密 码</span><input class="user_pa" type="password" v-model="password" >
        <input class="button" type="button" value="登录" @click="login">
    </div>
    </div>
    
</template>
<script>
export default {
    data(){
        return{
            username:'',
            password:''
        }
    },
    methods:{
        login(){
            this.$http.get("/loginuser/"+this.username).then(result=>{
                if (this.username==result.body.msg[0].username&&this.password==result.body.msg[0].password) {
                    console.log(result.body)
                    this.$store.commit("login",this.username)
                    // console.log(result.body.msg[0].car)
                    
                    this.$router.push({path:'/home'})
                    if (!result.body.msg[0].car) {
                        return
                    }else{
                        this.$store.commit("recar",result.body.msg[0].car)
                    }
                    
                }
                else{
                    alert('用户名或者密码错误')
                }
                
                
            })
        }
    }
}
</script>
<style lang="scss">
.bg{
    height: 900px;
    background-color: #fff;

    .loginq{
    position: relative;
    top: 200px;
    left: 600px;
    .user{
        height: 50px;
        width: 300px;
        border-radius: 10px;
        
    }
    .user_pa{
        height: 50px;
        width: 300px;
        position: absolute;
        top: 90px;
        left: 56px;
        border-radius: 10px;
       

    }
    .ma{
        display: block;
        position: absolute;
        top: 100px;
    }
    .button{
        position: absolute;
        top: 200px;
        width: 80px;
        border: 1px solid rgb(128, 64, 0);
        border-radius: 7px;
       
    }
}
}

</style>
